<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="customerTemplate.xhtml">

    <ui:define name="contentCustomer">
        <h1>Logged In Customer</h1>

        <p:tabView>
            <p:tab title="Your pages">
                <h1>Your pages</h1>
                <h:form>


                    <p:dataTable var="device" value="#{listDevicesPlannedInstallation.devicesPlannedInstallation}" paginator="true" rows="10">
                        <p:column>
                                <f:facet name="header">
                                   <h:outputText value="Id" />
                                </f:facet>
                                <h:outputText value="#{device.id}" />
                        </p:column>
                        <p:column>
                                <f:facet name="header">
                                   <h:outputText value="Name" />
                                </f:facet>
                                <h:outputText value="#{device.name}" />
                        </p:column>
                        <p:column>
                                <f:facet name="header">
                                  <h:outputText value="Type" />
                                </f:facet>
                                <h:outputText value="#{device.model.modelType.type}" />
                        </p:column>
                        <p:column>
                                <f:facet name="header">
                                  <h:outputText value="Model" />
                                </f:facet>
                                <h:outputText value="#{device.model.type}" />
                        </p:column>

                        <p:column>
                                <f:facet name="header">
                                   <h:outputText value="Country" />
                                </f:facet>
                                <h:outputText value="#{device.location.country.name}" />
                        </p:column>
                        <p:column>
                                <f:facet name="header">
                                   <h:outputText value="City" />
                                </f:facet>
                                <h:outputText value="#{device.location.city.name}" />
                        </p:column>
                        <p:column>
                                <f:facet name="header">
                                   <h:outputText value="Str." />
                                </f:facet>
                                <h:outputText value="#{device.location.street.name}" />
                        </p:column>
                        <p:column>
                                <f:facet name="header">
                                   <h:outputText value="Build." />
                                </f:facet>
                                <h:outputText value="#{device.location.building.name}" />
                        </p:column>

                    </p:dataTable>
                </h:form>

            </p:tab>
            <p:tab title="Choose your rate">
                <h1>Choose</h1>
                Choose and click "Confirm" button below to confirm the tariff plan for next month.
                <h:form prependId="false">
                    <p:dataTable id="table" var="rate" value="#{listRatesAvailable.ratesAvailable}"
                                 paginator="true" rows="10"
                            selection="#{listRatesAvailable.RateSelected}" dynamic="true"
                            selectionMode="single">
                        <!--<p:column>-->
                                <!--<f:facet name="header">-->
                                   <!--<h:outputText value="Id" />-->
                                <!--</f:facet>-->
                                <!--<h:outputText value="#{device.id}" />-->
                        <!--</p:column>-->
                        <p:column>
                                <f:facet name="header">
                                   <h:outputText value="Name" />
                                </f:facet>
                                <h:outputText value="#{rate.name}" />
                        </p:column>
                        <p:column>
                                <f:facet name="header">
                                  <h:outputText value="Traffic" />
                                </f:facet>
                                <h:outputText value="#{rate.traffic}" />
                        </p:column>
                        <p:column>
                                <f:facet name="header">
                                  <h:outputText value="Payment" />
                                </f:facet>
                                <h:outputText value="#{rate.payment}" />
                        </p:column>

                        <p:column>
                                <f:facet name="header">
                                   <h:outputText value="Description" />
                                </f:facet>
                                <h:outputText value="#{rate.description}" />
                        </p:column>
                        <!--<p:column>-->
                                <!--<f:facet name="header">-->
                                   <!--<h:outputText value="City" />-->
                                <!--</f:facet>-->
                                <!--<h:outputText value="#{device.location.city.name}" />-->
                        <!--</p:column>-->
                        <!--<p:column>-->
                                <!--<f:facet name="header">-->
                                   <!--<h:outputText value="Str." />-->
                                <!--</f:facet>-->
                                <!--<h:outputText value="#{device.location.street.name}" />-->
                        <!--</p:column>-->
                        <!--<p:column>-->
                                <!--<f:facet name="header">-->
                                   <!--<h:outputText value="Build." />-->
                                <!--</f:facet>-->
                                <!--<h:outputText value="#{device.location.building.name}" />-->
                        <!--</p:column>-->
                        <!--<p:column selectionMode="multiple"/>-->

                    </p:dataTable>

                    <p:commandButton value="Approve" update="table" actionListener="#{listDevicesAvailableInstallation.send}">
                        <p:confirmDialog yesLabel="Approve" noLabel="Cancel"
                                         message="Approve devices for installation?" header="Confirm"
                                         severity="warn" fixedCenter="true"/>
                    </p:commandButton>


                </h:form>
            </p:tab>
            <p:tab title="Payment">

        <h1>Payment</h1>
        <h:messages showDetail="true"/>
        <h:form>
            <table>
            <tr>
                <td><h:outputLabel for="code" value="Enter Card Code Here: " /></td>
                <td><h:inputText id="code" value="#{makePayment.code}">
                    </h:inputText>
                    </td>
            </tr>
            </table>
            <p:growl id="message" showDetail="true"/>
            <p:commandButton value="OK" actionListener="#{makePayment.makePayment}" update="message"/>
        </h:form>

            </p:tab>

            <p:tab title="List balance changes">
                   <h1>List balance changes</h1>
                <h:form>
                    <h:outputText value="Your balance is: "/>
                    <h:outputText value="#{listBalanceChanges.balance}"/>
                </h:form>
                <p:tabView>
                    <p:tab title="Payments">
            <p:dataTable var="payment" value="#{listBalanceChanges.listPayments}"  paginator="true" rows="10">
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Amount"/>
                </f:facet>
                <h:outputText value="#{pament.amount}"/>
            </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Date"/>
                    </f:facet>
                    <h:outputText value="payment.paymentDate"/>
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Card ID"/>
                    </f:facet>
                    <h:outputText value="payment.payCard.id"/>
                </p:column>
                    </p:dataTable>
                    </p:tab>
                    <p:tab title="Rates">
                        <p:dataTable var="rate" value="#{listBalanceChanges.listRates}" paginator="true" rows="10">
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Amount"/>
                                </f:facet>
                                <h:outputText value="rate.amount"/>
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Date"/>
                                </f:facet>
                                <h:outputText value="rate.dateOfRate"/>
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Service"/>
                                </f:facet>
                                <h:outputText value="rate.serviceForCustomer.service.name"/>
                            </p:column>
                        </p:dataTable>
                    </p:tab>
                </p:tabView>

            </p:tab>
            <p:tab title="Messages">


            </p:tab>

            <p:tab title="Write Message To Administration">

            </p:tab>
        </p:tabView>

    </ui:define>

</ui:composition>